<template>
    <div>
        <!-- 面包屑导航区 -->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/Breadcrumb' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item >权限管理</el-breadcrumb-item>
            <el-breadcrumb-item>权限列表</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 卡片视图 -->
        <el-card>
            <!-- stripe 隔行变色 -->
            <el-table :data="paginatedData" border stripe>
                <el-table-column type="index" label="#"></el-table-column>
                <el-table-column  label="权限名称" prop="authName"></el-table-column>
                 <el-table-column  label="路径" prop="path"></el-table-column>
                  <el-table-column  label="权限等级" prop="level">
                    <template slot-scope="scope">
                       <el-tag v-if='scope.row.level === "0"'>一级</el-tag>
                       <el-tag type="success" v-else-if="scope.row.level === '1'">二级</el-tag>
                       <el-tag type="warning" v-else-if="scope.row.level === '2'">三级</el-tag>
                       <el-tag type="info" v-else>未知</el-tag>
                    </template>
                  </el-table-column>
            </el-table>

            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="listQuery.page"
                :page-sizes="[10, 30, 50]" :page-size="listQuery.pageNum" layout="total, sizes, prev, pager, next, jumper"
                :total="totalNum" background>
            </el-pagination>
        </el-card>
    </div>
</template>
<script>
export default {
    data() {
        return {
            //所有的权限列表
            rightsList:[],
            listQuery: {
                page: 1,
                pageNum: 10
            }
        }
    },
    created() {
        this.getRightsList()
    },
    methods: {
        async getRightsList(){
            const{data:res} = await this.$http.get('rights/list')
            if (res.meta.status!==200) {
                return this.$message.error('获取权限列表失败！')
            }
            this.rightsList = res.data
        },
         // 每页列表数
        handleSizeChange(val) {
        this.listQuery.pageNum = val;
        },
        // 当前分页数（第几页）
        handleCurrentChange(val) {
        this.listQuery.page = val;
        },
    },
    computed:{
        // 使用前端实现分页的计算数据
        paginatedData() {
        // 分页的起始下标
        const startIndex = (this.listQuery.page - 1) * this.listQuery.pageNum;
        // 分页的末尾下标
        const endIndex = startIndex + this.listQuery.pageNum;
        // 返回切割后的数据
        return this.rightsList.slice(startIndex, endIndex);
        },
        // 总条数
        totalNum() {
        return this.rightsList.length;
        },
        // 总分页数
        total() {
        return Math.ceil(this.rightsList.length / this.listQuery.pageNum);
        }

    }

    
}
</script>
<style lang = less scoped>

</style>